{% macro with_errors(field) %}
  <!-- Wraps a form field with error handling. -->
  {% if field and field.errors %}
    {{ field(class=css_class, **kwargs) }}
    <ul class="errors">{% for error in field.errors %}<li>{{ error|e }}</li>{% endfor %}</ul>
  {% else %}
    {{ field(**kwargs) }}
  {% endif %}
{% endmacro %}

<!-- Render a field label. -->
{% macro render_label(label) %}
  {{ label(style="text-transform: capitalize;", **kwargs) }}
{% endmacro %}

<!-- Render the user message input field. -->
{% macro render_user_message(message) %}
  {{ message(class="form-control", autocomplete="off", **kwargs) }}
{% endmacro %}

<!-- Render a submit button. -->
{% macro render_submit(submit) %}
  {{ with_errors(submit, **kwargs) }}
{% endmacro %}

<!-- Render an instance of app.forms.BasicForm. -->
{% macro render_chat_form(form, id, bot_name) %}
  <div class="row text-center chat-form form-group">
    <div class="input-group">
      <!-- For CSRF reasons. -->
      {{ form.hidden_tag() }}
      {{ render_user_message(form.message, id=bot_name) }}
      <!-- Submit -->
      <div class="input-group-btn">
        {{ render_submit(form.submit, data_name=bot_name, class="chat-form-submit btn btn-primary btn-sm") }}
      </div>
    </div>
  </div>
{% endmacro %}


{% macro render_user_form(form, id) %}
  <div id="{{ id }}" class="form-group">
    <!-- For CSRF reasons. -->
    {{ form.hidden_tag() }}

    <!-- Key Input -->
    <div class="col-sm-9">
      <div class="input-group input-group-sm">
        <span id="key-addon" class="input-group-addon">Name</span>
        {{ form.name(class="form-control", placeholder="User McUserFace" , autocomplete="off") }}
      </div>
    </div>

    <div class="col-sm-2">
      <!-- Submit -->
      {{ render_submit(form.submit, id=id + '-submit', class='user-form-submit btn btn-primary btn-sm') }}
    </div>

  </div>
{% endmacro %}


